<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <!-- 引入 jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>留言板 - 添加留言</h2>

<form id="messageForm">
    姓名：<input type="text" id="name"><br>
    留言：<textarea id="content"></textarea><br>
    <button type="submit">提交</button>
</form>

<hr>
<h3>留言列表</h3>
<ul id="messageList"></ul>

<script>
    // 加载留言
    function loadMessages() {
        $.get('/v1/messages', function(data) {
            $('#messageList').empty(); // 清空
            data.forEach(function(msg) {
                $('#messageList').append(`<li>${msg.name}: ${msg.content}</li>`);
            });
        });
    }

    // 提交表单
    $('#messageForm').submit(function(e) {
        e.preventDefault(); // 阻止默认提交
        const name = $('#name').val();
        const content = $('#content').val();

        $.ajax({
            url: '/v1/messages',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ name, content }),
            success: function() {
                loadMessages(); // 提交后刷新列表
                $('#name').val('');
                $('#content').val('');
            }
        });
    });

    // 页面加载时自动调用
    $(document).ready(function() {
        loadMessages();
    });
</script>
</body>
</html>
